<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,user-scalable=no, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="format-detection" content="telephone=no">
<title>订单列表</title>
<script src="static/js/lib/cssrem.js"></script>
<link href="static/css/style.css" rel="stylesheet">
</head>
<body>
	<div class="content">
		<div class="wrapper">
			<div class="order-list">
				<c:forEach items="${orderList}" var="order" varStatus="vs">
					<div class="order-item bgwh">
						<a class="g3" href="<%=basePath%>wap/order/getOrderDetails?oid=${order.id}" >
							<div class="cell pt20 pb20">
								<div class="cell__bd f28 pl20 g3">订单编号:${order.orderCode}</div>
								<div class="cell__fd b f26 text-danger">${order.stateName}</div>
							</div> 
							<!-- 多款商品时显示 --> 
							<c:if test="${order.sum > '1'}">
								<div class="pt20 pb20 ui-1px-t order-swiper">
									<div class="swiper-container">
										<div class="swiper-wrapper">
											<c:forEach items="${order.goodsList}" var="goods"
												varStatus="gds">
												<div class="swiper-slide photo100">
													<img src="${goods.goodsThumb}" alt="">
												</div>
											</c:forEach>
										</div>
									</div>
								</div>
							</c:if> 
							<!-- 单商品展示 --> 
							<c:if test="${order.sum == '1'}">
								<c:forEach items="${order.goodsList}" var="good" varStatus="gd">
								<div class="cell pt20 pb20 ui-1px-t">
									<div class="cell__hd photo100 photo__goods">
										<img src="${good.goodsThumb}" alt="">
									</div>
									<div class="cell__bd f28 pl20 g3">
										<p class="f26">${good.title}</p>
										<div class="clearfix pt10">
											<span class="text-primary b l"><em class="f26">￥</em><em
												class="f30">${good.tradePrice}/${good.buyUnit}</em> </span> <span
												class="r f26 g9">${good.number}</span>
										</div>
									</div>
									<div class="cell__fd b f26 text-danger"></div>
								</div>
								</c:forEach>
							</c:if>
						</a>
						<div class="cell pt20 pb20 ml20 ui-1px-t">
							<div class="cell__bd f28 g3"></div>
							<div class="cell__fd f26">
								<em class="g9 f24">实付款：</em><em class="g3 b f28">￥${order.realPrice}</em>
							</div>
						</div>
						<c:if test="${order.state == '02'}">
						<div class="cell pt20 pb20 ml20 ui-1px-t">
							<div class="cell__bd f28 g3 tr">
								<a class="btn dib f24 g3 mr20" href="<%=basePath%>wap/order/getCourier?ordId=${order.id}&state=${order.state}" <!-- onclick="getstock('${order.id}','${order.state}')"-->发货</a>
							</div>
						</div>
						</c:if>
						<c:if test="${order.state == '03'}">
						<div class="cell pt20 pb20 ml20 ui-1px-t">
							<div class="cell__bd f28 g3 tr">
								<a class="btn dib f24 g3 mr20" onclick="updateState('${order.id}','${order.state}')">确认收货</a>
							</div>
						</div>
						</c:if>
					</div>
				</c:forEach>
			</div>
			<div class="data-load-end f28 tc dn g6 pb20">数据已加载完成!</div>
		</div>
	</div>
	<script src="https://cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
	<script type="text/javascript" src="static/js/lib/layer_mobile/layer.js"></script>
	<script>
    document.addEventListener('DOMContentLoaded', function () {
      dropDownDoad()
    });

    function dropDownDoad() {
  	  var content = document.querySelector('.content')
        var status = document.querySelector('.data-load-end')
        var list = document.querySelector('.order-list')
        var screenHeight, pageHeight, sTop, diff, remainder, isLoad = true;
        screenHeight = content.clientHeight;
        pageHeight = content.children[0].offsetHeight;
        var html ='';
        var page = 2;
        function init() {
          sTop = content.scrollTop;
          screenHeight = content.clientHeight;
          pageHeight = content.children[0].clientHeight;
          diff = pageHeight - screenHeight - sTop;
          return diff;
        }
        // 数据加载完成显示提示状态
        function loadDataEnd() {
          status.classList.remove('dn');
        }
        // 获取数据
        function getDate(remainder) {
          if (remainder < 5 && isLoad) {
            axios({
          	  method: 'get',
                url: '<%=basePath%>wap/order/search?page='+page
            }).then(function (res) {
              // 成功获取数据
              var tfList= res.data.tfList;
              var num=res.data.size;
              for(var i=0;i<tfList.length;i++){
                 html+= template(tfList[i])
              }
              list.insertAdjacentHTML('beforeend',html)
              if(num ==10){
                 	page= page +1
                  isLoad = true;
              }else{
              	isLoad = false;
              	loadDataEnd();
              }
              
            }).catch(function (err) {
              // 获取数据失败
              console.error(err);
              isLoad = true;
            });
            isLoad = false;
          }
        }
        // 初始化状态
        remainder = init();
        // 初始化加载数据
        getDate(remainder);      // 滚动加载数据
        content.addEventListener('scroll', function () {
          remainder = init();
          getDate(remainder);
        })
  }
    function template(v){
  	  var html = '<div class="order-item bgwh"> <a class="g3" href="<%=basePath%>wap/order/getOrderDetails?oid=v.id"> <div class="cell pt20 pb20">'
  		  html+='<div class="cell__bd f28 pl20 g3">订单编号:'+v.orderCode+'</div>'
  		  html+='<div class="cell__fd b f26 text-danger">'+v.stateName+'</div></div>'	
  		  if(v.sum > '1'){
  			  html+='<div class="pt20 pb20 ui-1px-t order-swiper"> <div class="swiper-container"> <div class="swiper-wrapper">'
  			  var goods = v.goodsList;
  			  for(var i=0;i<goods.length;i++){
  				  var good = goods[i];
  				  html+= '<div class="swiper-slide photo100"><img src="'+good.goodsThumb+'" alt=""></div>';
  			  }
				  html+='</div></div></div>'
  		  }
  	 	 if(v.sum=='1'){
  		  	var goods = v.goodsList;
  		  	for(var i=0;i<goods.length;i++){
  			  	var good = goods[i];
  			  	html+='<div class="cell pt20 pb20 ui-1px-t"><div class="cell__hd photo100 photo__goods"><img src="'+goods.goodsThumb[i]+'" alt=""></div><div class="cell__bd f28 pl20 g3">'
  		  	  	html += '<p class="f26">${good.title}</p><div class="clearfix pt10"><span class="text-primary b l"><em class="f26">￥</em>'
				 	html += '<emclass="f30">'+good.tradePrice/good.buyUnit+'</em> </span> <spanclass="r f26 g9">'+good.number+'</span></div></div>'
  		  	  	html += '<div class="cell__fd b f26 text-danger"></div></div>'
  		  	}
		  	}
  	  		html += '</a> <div class="cell pt20 pb20 ml20 ui-1px-t"> <div class="cell__bd f28 g3"></div> <div class="cell__fd f26">'
  	      	html += '<em class="g9 f24">实付款：</em><em class="g3 b f28">￥'+v.realPrice+'</em></div></div>'
  	      	if(v.state == '02'){
  	      		html += '<div class="cell pt20 pb20 ml20 ui-1px-t"><div class="cell__bd f28 g3 tr">'
  	    	    html += '<a class="btn dib f24 g3 mr20" href="<%=basePath%>wap/order/getCourier?ordId='+v.id+'&state='+v.state+'"> 发货 </a></div></div>'
  	      	}
  	      	if(v.state == '03'){
  	      		html += '<div class="cell pt20 pb20 ml20 ui-1px-t"><div class="cell__bd f28 g3 tr">' 
  	    	    html += '<a class="btn dib f24 g3 mr20" onclick="updateState(\''+v.id+'\',\''+v.state+'\')">确认收货</a></div></div>'
  	      	}
  	      	html += '</div>'
  	    	return html;
  	      			
    }
      
    //添加司机页面
      function getstock(orderId,state){
    	  axios({
         	 method: 'get',
              url: '<%=basePath%>wap/order/getCourier?ordId=' + orderId + '&state=' + state
         }).then(function (res) {
        	 
         }).catch(function (err) {
            
         });
      }
    
    //确认收货
    function updateState(orderId,state){
    	console.log(orderId,state)
    	axios({
        	 method: 'get',
             url: '<%=basePath%>wap/order/updateState?ordId=' + orderId + '&state=' + state
        }).then(function (res) {
        	layer.open({
				 content:'已确认',
				 time: 2
		      }); 
        }).catch(function (err) {
        	layer.open({
				 content:'确认失败，请联系管理员',
				 time: 2
		      }); 
        });
      }
  </script>
	<script type="text/javascript" src="static/js/lib/vendor.js"></script>
	<script type="text/javascript" src="static/js/lib/app.js"></script>
</body>

</html>
